<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}

</style>

<template>
  <div v-loading="loading">
    <!-- 操作 -->
   <div class="group_title">
     关联角色
   </div>
    <div class="operation">
<!--       <el-button size="small" type="primary" v-has="[role.request]" @click="fetchData">查询</el-button>
      <el-button size="small" type="danger" v-has="[role.remove]">删除</el-button>
      <el-button size="small" v-if="$_has([role.request]) && canReset">重置</el-button>
      <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求</el-button> -->

    </div>
    <!-- table start  -->
    <el-table ref="multipleTable" :data="list" border style="width: 100%;"  @selection-change="selsChange" >
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="roleName" width="150" label="角色名称">
      </el-table-column>
   
      <el-table-column prop="roleDesc" label="角色描述">
      
      </el-table-column>

     
    </el-table>
    <!-- table end  -->
    <!--工具条-->
    <el-col :span="24" class="toolbar toolbar_footer">
      <el-button type="primary" v-if="isReleRole" @click="batchRemove" :disabled="this.sels.length===0">保存</el-button>
      <!-- <el-pagination v-if="total" layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
      </el-pagination> -->
    </el-col>
  </div>
</template>

<script>
import * as role from '../api/role';

let myMixin = {
  data: function() {
    return { role }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      isReleRole:true,
      filters:{name:''},//搜索表单
     
      sels: [],//列表选中列

      list: [],
      canReset: true,
      loading: false,
      userId:'',
      roleIdSelect:[],//已经有的角色id
      roleArr:[],//所有角色id
      groupId:'',
      resourceId:''

    }
  },
  methods: {
    checked(index){
      //首先el-table添加ref="table"引用标识
      this.$refs.multipleTable.toggleRowSelection(this.list[index],true);
    },
   selectCheck(){
      let index=0;
      if(this.roleIdSelect!=undefined&&this.roleIdSelect!="undefined"&&this.roleIdSelect!=''){

         this.roleIdSelect.map(x=>{

           for(var i=0;i<this.roleArr.length;i++){
             if(this.roleArr[i]==x){
               this.checked(i);//每次更新了数据，触发这个函数即可。
             }
           }

         })
      }
     

    },
    selsChange: function (sels) {//多选框
      this.sels = sels;
    },
    batchRemove: function () {//批量保存
      var ids = this.sels.map(item => item.roleId).toString();
      let para={};
      if(this.userId!=undefined&&this.userId!="undefined"&&this.userId!=""){

        para = {
          userId:this.userId,
          roleIdList:ids
        };
        role.relerole.r(para).then((res) => {
          if(res.data.retCode==1){
            //关联角色成功
            this.addFormVisible = false;
            this.$message("关联角色成功");

            this.$parent.fetchData();
            this.$router.push(this.$parent.$route.matched[2].path);
 
          }else{
            this.$message(res.data.retMsg);
          }
          
        });
  
      }else if(this.groupId!=undefined&&this.groupId!="undefined"&&this.groupId!=""){
          para = {
            groupId:this.groupId,
            roleIdList:ids
          };
          role.releroleGroup.r(para).then((res) => {
            if(res.data.retCode==1){
              //关联角色成功
              this.addFormVisible = false;
              this.$message("关联角色成功");
 
              this.$parent.fetchData();
              this.$router.push(this.$parent.$route.matched[2].path);
   
            }else{
              this.$message(res.data.retMsg);
            }
            
          });
      }else if(this.resourceId!=undefined&&this.resourceId!="undefined"&&this.resourceId!=""){
        para = {
            resourceId:this.resourceId,
            roleIdList:ids
          };
          role.releroleAuth.r(para).then((res) => {
            if(res.data.retCode==1){
              //关联角色成功
              this.addFormVisible = false;
              this.$message("关联角色成功");
 
              this.$parent.fetchData();
              this.$router.push(this.$parent.$route.matched[2].path);
   
            }else{
              this.$message(res.data.retMsg);
            }
            
          });
      }
    
    },
    getUsers(){
      //获取用户信息
      let para = {
          userId:this.userId
        };
      role.userinfo.r(para).then((res) => {
        if(res.data.retCode==1){

        }else{
          this.$message(res.data.retMsg);
        }
      })
    },
  
    fetchData(init) {
       this.loading = true;
        let para = {
         // userId:this.userId 
        };
      role.requestList.r(para).then((res) => {
        if(res.data.retCode==1){
          this.total=res.data.data.totalRow;
          this.list = res.data.data;
          this.list.map(x=>{
            this.roleArr.push(x.roleId);            
          })
        this.fetchDataList();

        }else{
          this.$message(res.data.retMsg);
        }
          this.loading = false;
          
      })
    },
    fetchDataList() {
      
        let para = {
         userId:this.userId,
         groupId:this.groupId,
         resourceId:this.resourceId
        };
      role.requestList.r(para).then((res) => {
        if(res.data.retCode==1){
          res.data.data.map(x=>{
            this.roleIdSelect.push(x.roleId);

          })

        this.selectCheck();
         
        }else{
          this.$message(res.data.retMsg);
        }        
        
      })
    },
    requestNotAllowed: function(){
      role.notAllowed.r();
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    "$route": function(){
    }
  },
  created() {
  
    this.userId=this.$route.query.id;
    this.groupId=this.$route.query.groupId;
    this.resourceId=this.$route.query.resourceId;
    if(this.userId!=undefined && this.userId!="undefined" && this.userId!=""){
        this.isReleRole=this.$_has([role.relerole]);

    }else if(this.groupId!=undefined && this.groupId!="undefined" && this.groupId!=""){
       this.isReleRole=this.$_has([role.releroleGroup]);
    }else if(this.resourceId!=undefined && this.resourceId!="undefined" && this.resourceId!=""){
      this.isReleRole=this.$_has([role.releroleAuth])      
    }
    this.fetchData(true)

    // this.fetchDataList();
    // this.getUsers();
  }
}
</script>